<template>
	<view class="container">
		<view class="header">
			<view class="con">
				<view class="search">
					<image src="/static/fanli/icon_search.png" class="icon" mode=""></image>
					<input 
						class="input" 
						type="text" 
						placeholder="搜索商品标题，领优惠券拿礼品券" 
						confirm-type="search"
						v-model="keyword" 
						@confirm="onSearchClick" 
						@focus="onSearchFocus" 
					/>
				</view>
				
				<view class="btn_search" @click="onSearchClick">
					<text>搜索</text>
				</view>
			</view>
		</view>
		
		<!-- <view class="platform">
			<view 
				v-for="(item, index) in platformList" 
				:key="index"
				class="tab"
				:class="currentPlatform == index ? 'current' : ''"
				@click="onPlatformChange(index)"
			>
				<text>{{item.name}}</text>
			</view>
		</view> -->
		
		<view class="panel" v-if="!isSearched && !isSearching">
			
			<view class="dl">
				<view class="dt">
					<text>历史搜索</text>
					
					<image src="/static/fanli/123.png" mode="" class="icon" @click="onClearClick"></image>
				</view>
				
				<view class="dd">
					<view class="li" v-for="(item, index) in historyKeyword" :key="index" @click="onHotTagClick(item, index)">
						<text>{{item.value}}</text>
					</view>
				</view>
			</view>
			
			<!-- <view class="dl">
				<view class="dt">
					<text>大家都在搜</text>
				</view>
				
				<view class="dd">
					<view class="li" v-for="(item, index) in hotKeyword" :key="index" @click="onHotTagClick(item, index)">
						<text>{{item.value}}</text>
					</view>
				</view>
			</view> -->
		</view>
		
		<template v-for="(platform, pindex) in platformList">
			<view v-if="isSearched" v-show="pindex==currentPlatform" :key="pindex">
				<view class="sortby">
					<view class="li" v-for="(item, index) in orderByList" :key="index" :class="platform.currentOrderBy == index ? 'current' : ''" >
						<view class="touch" @click="onSortByClick(item, index)">
							<text>{{item.type != 'click' ? item.child[platform.currentOrderByChild[index]].name : item.name}}</text>
							
							<view class="icons">
								<image src="/static/fanli/125.png" mode="" class="icon" v-show="item.type == 'click' && platform.currentOrderBy != index"></image>
								<image src="/static/fanli/127.png" mode="" class="icon" v-show="platform.currentOrderBy != index"></image>
								
								<image src="/static/fanli/124.png" mode="" class="icon" v-show="platform.currentOrderByChild[index] == 1 && item.type == 'click' && platform.currentOrderBy == index"></image>
								<image src="/static/fanli/126.png" mode="" class="icon" v-show="(item.type != 'click' && platform.currentOrderBy == index) || (platform.currentOrderByChild[index] == 0 && item.type == 'click' && platform.currentOrderBy == index)"></image>
							</view>
						</view>
						
						<view class="sub" v-if="item.type != 'click'" v-show="showOrderByListSelect">
							<view class="shadow" @click="onCloseSelectSortByClick"></view>
							<view class="con">
								<view 
									v-for="(child, cidx) in item.child" 
									:key="cidx" 
									class="cli"
									:class="platform.currentOrderByChild[index] == cidx && platform.currentOrderBy == index ? 'current' : '' "
									@click="onSelectSortByClick(child, cidx, index)"
								>
									<text>{{child.name}}</text>
									
									<image v-show="platform.currentOrderByChild[index] == cidx && platform.currentOrderBy == index" src="../../../static/fanli/128.png" mode="" class="icon"></image>
								</view>
							</view>
						</view>
					</view>
					
					<view class="bottom">
						<view class="p">
							仅显示优惠券商品
						</view>
						
						<switch style="transform:scale(0.7)" :checked="youquan" @change="onYouquanChange" />
					</view>
				</view>
				
				<view class="flatList">
					<template v-for="(item, index) in platform.list" >
						<goods-list-item
							:item="item"
							:index="index"
							:key="index"
							@on-item-click="onGoodClick"
							@on-share-click="onShareClick"

						/>
					</template>
				</view>
			</view>
		</template>
		
		<uni-load-more v-if="isSearched || isSearching" :status="platformList[currentPlatform].loadingMore ? 'loading' : ''"></uni-load-more>
		<good-share  ref="goodShare" />

	</view>
</template>

<script>
	import { JSMRequest } from '@/module/api'
	import { decodeGoodId, encodeGoodId } from '@/common/util'
    import WxNotificationCenter from '@/libs/WxNotificationCenter/wxnotificationcenter'
	import goodsListItem from '@/components/goods-list-item/goods-list-item'
	import uniLoadMore from "@/components/uni-load-more/uni-load-more.vue"
	import GoodShare from '@/components/good-share/good-share'

	const _ = require("@/libs/underscore/underscore-min.js")._
	const HISTORYKEY = "storage_home_search_history"
	
	export default {
		components: {
			uniLoadMore,
			goodsListItem,
			GoodShare

		},
		data() {
			return {
				isSearched: false,
				isSearching: false,
				keyword: '',
				catid: null,
				refreshing: false,
				page: 1,
				loadingMore: true,
				isEmpty: false,
				list: [],
				// 1：综合  2：销量降序 3：销量升序  4：价格升序  5：价格降序 6：佣金比例降序 7：佣金比例升序
				orderByList: [
					{
						name: '综合',
						child: [
							{
								name: '综合',
								value: 1
							},
							{
								name: '佣金比例降序',
								value: 6
							},
							{
								name: '佣金比例升序',
								value: 7
							}
						],
						type: 'select',
						status: false
					},
					{
						name: '销量',
						child: [
							{
								name: '销量降序',
								value: 2
							},
							{
								name: '销量升序',
								value: 3
							}
						],
						type: 'click'
					},
					{
						name: '价格',
						child: [
							{
								name: '价格降序',
								value: 5
							},
							{
								name: '价格升序',
								value: 4
							}
						],
						type: 'click'
					}
				],
				showOrderByListSelect: false,
				banner: null,
				currentOrderBy: 0,
				currentOrderByChild: 0,
				sortBy: 1,
				historyKeyword: [],
				hotKeyword: [],
				platformList: [
					{ 
						name: '京东', 
						value: 'jd',
						requestType: 1,
						list: [],
						sortBy: 1,
						page: 1,
						loaded: false,
						isEmpty: false,
						loadingMore: true,
						currentOrderBy: 0,
						currentOrderByChild: [0, 0, 0],
						currentOrderBySelect: null
					},
					{ 
						name: '京商盟', 
						value: 'pdd',
						requestType: 2,
						list: [],
						sortBy: 1,
						page: 1,
						loaded: false,
						isEmpty: false,
						loadingMore: true,
						currentOrderBy: 0,
						currentOrderByChild: [0, 0, 0],
						currentOrderBySelect: null
					},
				],
				currentPlatform: 0,
				youquan: true
			};
		},
		
		computed: {
			shareAppMessage () {
				return this.$store.state.shareAppMessage
			},
			
			userInfo () {
				return this.$store.state.userInfo
			}
		},
		
		onShareAppMessage () {
			return this.shareAppMessage
		},
		
		onLoad(params) {
			let _t = this
			this.catid = params.catid || null
			
			if(this.catid){
				this.getPageData()
			}else{
				this.keyword = params.keyword
				if(this.keyword){
					this.onSearchClick()
				}
			}
			
			// 获取历史搜索记录
			uni.getStorage({
				key: HISTORYKEY,
				success: res => {
					_t.historyKeyword = res.data
					console.log(_t.historyKeyword.length)
				}
			})
			
			// 获取热门搜索记录
			// runGetSearchHotTag({
			// 	success: res => {
			// 		let hotKeyword = []
			// 		_.each(res.data.key.split(','), item => {
			// 			if(item != ''){
			// 				hotKeyword.push({
			// 					value: item
			// 				})
			// 			}
			// 		})
			// 		_t.hotKeyword = hotKeyword
			// 	}
			// })
		},
		
		onReachBottom() {
			let _t = this
			let platformList = this.platformList
			let current = this.currentPlatform
			let platform = platformList[current]
			
			if(!platform.loaded)return false
			if(platform.isEmpty)return false
			if(platform.loadingMore)return false
			if(this.refreshing)return false
			
			platform.page ++
			platform.loadingMore = true
			
			this.getPageData()
		},
		
		methods: {
			getPageData () {
				let _t = this
				let platformList = this.platformList
				let current = this.currentPlatform
				let platform = platformList[current]
				
				let failFun = () => {
					platform.isEmpty = true
					
					platform.loadingMore = false
					platform.loaded = true
					
					_t.isSearched = true
					_t.isSearching = false
					_t.refreshing = false
				}
				
				JSMRequest({
					tag: "jsm-search",
					params: {
						q: this.keyword,
						page: platform.page,
						sort: platform.sortBy,
						youquan: this.youquan ? 1 : 0,
						cat: this.catid || ""
					}
				}).then(res => {
					let list = [];
									
					_.each(res.data, (v, k) => {
						list.push(v)
					})
									
					platform.list = platform.list.concat(list)
					platform.isEmpty = list.length < 10
					platform.loadingMore = false
					platform.loaded = true
					
					_t.isSearched = true
					_t.isSearching = false
					_t.refreshing = false
				}).catch(e => {
					failFun()
				})
				
			},
			
			onPlatformChange (index) {
				let _t = this
				this.currentPlatform = index;
				if(this.isSearched){
					let platformList = this.platformList
					let current = index
					let platform = platformList[index]
					
					this.onCloseSelectSortByClick()
					if(!platform.loaded) this.getPageData()
				}
				
			},
			
			onSearchFocus () {
				let _t = this
				let platformList = this.platformList
				
				_.each(platformList, (v) => {
					v.sortBy = 1
					v.currentOrderBy = 0
					v.currentOrderByChild = [0, 0, 0]
					v.currentOrderBySelect = null
					v.page = 1
					v.list = []
					v.loadingMore = true
					v.isEmpty = false
					v.loaded = false
				})
					
				this.onCloseSelectSortByClick()
				this.isSearched = false
				this.isSearching = false
			},
			
			onSearchClick () {
				let _t = this
				let platformList = this.platformList
				let current = this.currentPlatform
				let platform = platformList[current]
				
				this.onCloseSelectSortByClick()
				if(_.isEmpty(this.keyword)) return false
				
				let keyword = this.keyword;
				let v6_flag = [
					'- - -$￥',
					'￥$- - -',
				]
				
				if(keyword.indexOf(v6_flag[0]) > -1 && keyword.indexOf(v6_flag[1]) > -1){
					let code = keyword.split(v6_flag[0]);
					code = code[1];
					code = code.split(v6_flag[1]);
					code = code[0];

					let id = decodeGoodId(code)
					
					uni.navigateTo({
						url: "/pages/home/good-detail/good-detail?id=" + id.substring(0, id.length-1) + "&type=" + id.substring(id.length-1)
					})
					
					this.keyword = ""
				}else{
					this.isSearching = true
					
					this.getPageData()
					this.updateSearchHistory()
				}
				 
			},
			
			// 商家详情
			onSupplierClick (item, index) {
				uni.navigateTo({
					url: "/pageSupplier/supplier/detail/detail?id=" + item.id
				})
			},
			
			onYouquanChange (e) {
				this.youquan = e.detail.value
				let _t = this
				let platformList = this.platformList
				let current = this.currentPlatform
				let platform = platformList[current]
				
				platform.page = 1
				platform.list = []
				platform.loadingMore = true
				platform.isEmpty = false
				
				this.getPageData()
			},
			
			// 排序
			onSortByClick (item, index) {
				let _t = this
				let platformList = this.platformList
				let current = this.currentPlatform
				let platform = platformList[current]
				
				if(item.type == 'click'){
					if(platform.currentOrderBy == index){
						platform.currentOrderByChild[index] = platform.currentOrderByChild[index] == 0 ? 1 : 0
						platform.sortBy = this.orderByList[index].child[platform.currentOrderByChild[index]].value
					}else{
						platform.currentOrderBy = index
						platform.currentOrderByChild[index] = 0
						platform.sortBy = this.orderByList[index].child[0].value
					}
					
					platform.page = 1
					platform.list = []
					platform.loadingMore = true
					platform.isEmpty = false
					
					this.onCloseSelectSortByClick()
					this.getPageData()
				}else{
					this.showOrderByListSelect = true
				}
			},
			
			// 排序下拉
			onSelectSortByClick (item, index, pindex){
				let _t = this
				let platformList = this.platformList
				let current = this.currentPlatform
				let platform = platformList[current]
				
				if(platform.currentOrderByChild[pindex] == index && platform.currentOrderBy == pindex){
					this.onCloseSelectSortByClick()
				}else{
					platform.currentOrderBy = pindex
					platform.currentOrderByChild[pindex] = index
					platform.sortBy = this.orderByList[pindex].child[index].value
					
					platform.page = 1
					platform.list = []
					platform.loadingMore = true
					platform.isEmpty = false
					
					this.onCloseSelectSortByClick()
					this.getPageData()
				}
			},
			
			onCloseSelectSortByClick () {
				this.showOrderByListSelect = false
			},
			
			// 清空记录
			onClearClick () {
				this.historyKeyword = []
				uni.removeStorage({
					key: HISTORYKEY
				})
			},
			
			// 更新记录
			updateSearchHistory () {
			    let _t = this
				let length = 8;
				let historyKeyword = this.historyKeyword;
				let keyword = this.keyword;
				
				if(!_.isEmpty(historyKeyword)){
					if(_.indexOf(historyKeyword, keyword) > -1){
						historyKeyword = _.without(historyKeyword, keyword)
					}
					historyKeyword = _.filter(historyKeyword, (v) => {return v.value != keyword})
					historyKeyword.unshift({ value: keyword });
					historyKeyword = _.first(historyKeyword, length);
				}else{
					historyKeyword.push({ value: keyword });
				}
				
				this.historyKeyword = historyKeyword
				
				uni.setStorage({
					key: HISTORYKEY,
					data: historyKeyword
				})
			},
			
			onHotTagClick (item, index) {
				this.keyword = item.value
				this.onSearchClick()
			},
			
			onGoodClick (item, index){
				uni.navigateTo({
					url: "/pages/home/good-detail/good-detail?id=" + item.item_id + "&type=" + item.item_type
				})
			},

			onShareClick (item, index) {
				if(this.userInfo == null){
					return uni.navigateTo({
						url: "/pages/index/index"
					})
				}
				
				// 绑定邀请码
				if(!this.userInfo.parent){
					return uni.navigateTo({
						url: "/pageMe/me/bind-invite/bind-invite"
					})
				}
				
				let type = item.item_id ? 1 : 2
				let id = item.item_id || item.id
				let codeStr = '- - -$￥' + encodeGoodId(id.toString()) + '1￥$- - -';
				let copyText = item.title || item.goods_name
				
				this.$refs.goodShare.show({
					id,
					type,
					text: copyText
				})
			},
		}
	}
</script>

<style lang="less" scoped>
	.header{
		position: sticky;
		width: 100%;
		height: 92px;
		top: 0;
		left: 0;
		z-index: 10;
		background-color: #FFFFFF;
		
		.con{
			width: 100%;
			height: 100%;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
			box-sizing: border-box;
			padding-left: 30px;
			position: relative;
			
			.search{
				height: 72px;
				border-radius: 36px;
				background: #F1F1F1;
				position: relative;
				padding-left: 80px;
				width: 620px;
				box-sizing: border-box;
				
				.icon{
					width: 32px;
					height: 32px;
					position: absolute;
					left: 30px;
					top: 20px;
				}
				
				.input{
					width: 100%;
					height: 100%;
					font-size: 26px;
					color: #333333;
				}
			}
			
			.btn_search{
				width: 100px;
				height: 72px;
				display: flex;
				justify-content: center;
				align-items: center;
				
				text{
					color: #FF5757;
					font-size: 28px;
				}
			}
		}
	}
	
	.platform{
		width: 100%;
		height: 88px;
		background-color: #FFFFFF;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		
		.tab{
			width: 50%;
			height: 100%;
			display: flex;
			flex-direction: row;
			justify-content: center;
			align-items: center;
			position: relative;
			opacity: .6;
			
			text{
				font-size: 30px;
				color: #333;
			}
			
			&.current{
				opacity: 1;
				
				text{
					color: #FF5757;
				}
				
				&::after{
					position: absolute;
					bottom: 10px;
					left: 50%;
					margin-left: -13px;
					width: 26px;
					height: 6px;
					background: #FF5757;
					display: block;
					content: "";
				}
			}
		}
	}
	
	.sortby{
		position: sticky;
		top: 92px;
		left: 0;
		z-index: 10;
		background-color: #FFFFFF;
		
		width: 100%;
		height: 172px;
		padding-bottom: 80px;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		box-sizing: border-box;
		
		.li{
			width: 250px;
			height: 92px;
			display: flex;
			flex-direction: row;
			justify-content: center;
			align-items: center;
			
			.touch{
				width: 180px;
				height: 52px;
				display: flex;
				flex-direction: row;
				justify-content: center;
				align-items: center;
				background: #f2f2f2;
				border-radius: 26px;
			}
			
			text{
				font-size: 22px;
				color: #333333;
			}
			
			.icons{
				margin-left: 8px;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
			}
			
			.icon{
				width: 12px;
				height: 8px;
				margin: 2px 0;
			}
			
			&.current{
				.touch{
					background: #fff;
					box-sizing: border-box;
					border: 1px solid #FC1F42;
				}
				
				
				text{
					color: #FC1F42;
				}
			}
			
			.sub{
				width: 750px;
				height: 1334px;
				position: absolute;
				top: 92px;
				left: 0;
				
				.shadow{
					position: absolute;
					top: 0;
					left: 0;
					right: 0;
					bottom: 0;
					background: rgba(0,0,0,.75);
				}
				
				.con{
					background: #F2F2F2;
					border-radius: 0 0 20px 20px;
					padding-bottom: 20px;
					padding-top: 10px;
					overflow: hidden;
					position: relative;
					
					.cli{
						height: 80px;
						display: flex;
						flex-direction: row;
						align-items: center;
						justify-content: space-between;
						padding: 0 30px;
						
						text{
							font-size: 28px;
							color: #666;
						}
						
						.icon{
							width: 24px;
							height: 16px;
						}
						
						&.current{
							
							text{
								color: #FF3660;
							}
						}
					}
				}
			}
		}
		
		.bottom{
			border-bottom: 1px solid #ddd;
			height: 80px;
			position: absolute;
			bottom: 0;
			left: 0;
			width: 100%;
			padding: 0 30px;
			box-sizing: border-box;
			display: flex;
			justify-content: space-between;
			align-items: center;
			
			.p{
				font-size: 24px;
				color: #333333;
			}
		}
	}
	
	.flatList{
		padding: 30px 30px 0;
		
	}
	
	.panel{
		position: fixed;
		top: 180px;
		bottom: 0;
		left: 0;
		width: 100%;
		background: #FFFFFF;
		
		.ad{
			padding: 40px 30px 0;
			
			.pic{
				width: 100%;
			}
		}
		
		.dl{
			padding-top: 40px;
			
			.dt{
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				align-items: center;
				padding: 0 30px;
				
				.icon{
					width: 30px;
					height: 30px;
				}
				
				text{
					font-size: 30px;
					color: #333;
				}
			}
			
			.dd{
				padding-left: 50px;
				
				.li{
					display: flex;
					flex-direction: row;
					justify-content: center;
					align-items: center;
					padding: 0 24px;
					float: left;
					background: #F2F2F2;
					height: 60px;
					border-radius: 30px;
					margin-top: 20px;
					margin-right: 20px;
					
					text{
						font-size: 26px;
						color: #666;
					}
				}
				
				&::after{
					display: block;
					content: "";
					clear: both;
				}
			}
		}
	}
</style>
